<template>
    <div class="bx-prodect-config">
        <van-nav-bar
                title="产品配置"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="up-img" style="margin-top: 20px;">
            <div><span style="color: red;">*</span>客户营业执照上传</div>
            <van-uploader :max-count="1" v-model="business_license" @click-preview="showImg(0)"
                          :preview-full-image="false" :after-read="afterRead" :name="'license'">
                <img class="up-icon" src="../../../assets/img/zhizhao.png" alt="">
            </van-uploader>
        </div>
        <div class="up-img">
            <div><span style="color: red;">*</span>法人身份证上传</div>
            <van-uploader :max-count="1" v-model="id_card" @click-preview="showImg(1)"
                          :preview-full-image="false" :after-read="afterRead" :name="'idCard'">
                <img class="up-icon" src="../../../assets/img/id_card.png" alt="">
            </van-uploader>
        </div>
        <div style="height:9px;background: #f5f5f5;"></div>
        <div class="title">
            产品配置
        </div>
        <div class="product-config" v-for="(item, index) in config" :key="index">
            <div class="line">
                <div>
                    <div class="type-box" @click="goodsPopupShow = true; goodsPopupShowIndex = index">
                        {{goodsSource.length==0?'--请选择--':goodsSource[item.goodsIndex].name}}
                        <img src="../../../assets/icon/row.png" alt="">
                    </div>
                </div>
                <div class="money-box">
                    <input type="name" v-model="item.price">
                    <span>元</span>
                </div>
            </div>
            <div class="line">
                <van-field readonly clickable :value="timeTurn(item.startTime)" @click="selectTime('start',index)"
                           right-icon="clock-o"/>
                <van-field readonly clickable :value="timeTurn(item.endTime)" @click="selectTime('end',index)"
                           right-icon="clock-o"/>
            </div>
            <div class="up-box">
                <van-uploader :after-read="uploadSuccess" accept="*" :name="index">
                    <van-button icon="upgrade" size="small" :color="item.file == '' ? '#7232dd':'#999'" type="primary">
                        {{item.file == '' ? '未上传合同':'已上传合同'}}
                    </van-button>
                </van-uploader>
                <van-button tag="div" size="small" color="linear-gradient(to right, #f54a51, #b62e34)" type="warning"
                            @click="delConfig(index)">删除配置
                </van-button>
            </div>
        </div>

        <van-popup v-model="goodsPopupShow" position="bottom">
            <van-picker show-toolbar value-key="name" :columns="goodsSource" @cancel="goodsPopupShow = false"
                        @confirm="goodsSelectConfirm"/>
        </van-popup>

        <van-popup v-model="startTimePopupShow" position="bottom">
            <van-datetime-picker v-model="startTimeVal" type="date" @cancel="startTimePopupShow = false"
                                 @confirm="timeConfirm('start')"/>
        </van-popup>
        <van-popup v-model="endTimePopupShow" position="bottom">
            <van-datetime-picker v-model="endTimeVal" type="date" @cancel="endTimePopupShow = false"
                                 @confirm="timeConfirm('end')"/>
        </van-popup>
        <div class="foot-btn">
            <div class="blue-btn" @click="addConfig">新增产品配置</div>
            <div class="red-btn" @click="pushInfo">保存配置</div>
        </div>
        <div></div>
    </div>
</template>

<script>
    import {ImagePreview} from 'vant';

    export default {
        name: "bxProdectConfig",
        data() {
            return {
                business_license: [], //营业执照
                id_card: [], //法人身份证

                config: [
                    {
                        goodsIndex: 0,
                        price: '',
                        startTime: new Date(),
                        endTime: new Date(),
                        file: '',
                    }
                ],

                timeIndex: '',
                startTimeVal: '',
                startTimePopupShow: false,

                endTimeVal: '',
                endTimePopupShow: false,

                minDate: new Date(2018, 0, 1),
                maxDate: new Date(),
                qiniuToken: {},
                goodsPopupShow: false,
                goodsPopupShowIndex: Number,
                goodsSource: [],
                imgUrl1: '',
                imgUrl2: '',
            };
        },
        methods: {
            showImg(index) {
                let imgUrl = []
                if (index == 0) imgUrl.push(this.imgUrl1)
                else imgUrl.push(this.imgUrl2)
                console.log(imgUrl);
                this.$imagePreview({
                    images: imgUrl,
                    index: 0,
                })
            },
            timeTurn(val) {
                return this.$formatDateTime(val, 'yyyy-MM-dd');
            },
            afterRead(file, index) {
                let {name} = index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                this.$QiniuUpload(this.qiniuToken, file)
                    .then(res => {
                        this.$Toast.clear();
                        if (name == 'license') {
                            this.business_license = [
                                {url: this.qiniuToken.domain + res.key},
                            ]
                            this.imgUrl1 = this.qiniuToken.domain + res.key
                        } else {
                            this.id_card = [
                                {url: this.qiniuToken.domain + res.key},
                            ]
                            this.imgUrl2 = this.qiniuToken.domain + res.key
                        }
                        console.log(this.business_license, '营业执照图');
                        console.log(this.id_card, '身份证图');
                    })
                    .catch(err => {
                        this.$Toast.clear();
                    });


            },
            // 文件上传
            uploadSuccess(file, index) {
                let {name} = index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                this.$QiniuUpload(this.qiniuToken, file)
                    .then(res => {
                        this.$Toast.clear();
                        this.config[name].file = this.qiniuToken.domain + res.key
                    })
                    .catch(err => {
                        this.$Toast.clear();
                    });

            },
            goodsSelectConfirm(value, index) {
                let data = this.config[this.goodsPopupShowIndex];
                data.goodsIndex = index;
                this.$set(this.config, this.goodsPopupShowIndex, data);
                this.goodsPopupShow = false;
            },
            addConfig(value) {
                let data = {
                    goodsIndex: 0,
                    price: '',
                    startTime: new Date(),
                    endTime: new Date(),
                    file: '',
                }
                this.config.push(data)
            },
            delConfig(index) {
                this.$Dialog.confirm({
                    title: '温馨提示',
                    message: '确认删除这个产品配置么',
                    closeOnPopstate: true,
                })
                    .then(() => {
                        this.config.splice(index, 1)
                    })
                    .catch(() => {
                    });
            },
            getQiniuToken() {
                this.$post("/api/qiniu/up_token", {})
                    .then(res => {
                        this.qiniuToken = res
                    })
                    .catch(err => {
                    });

            },
            getProductConfig() {
                let data = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: 4,
                }
                this.$post("/api/member_goods/get_product", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.goodsSource = res.data.goods
                        }
                    })
                    .catch(err => {
                    });

            },
            selectTime(type, index) {
                this.timeIndex = index
                if (type == 'start') {
                    this.startTimeVal = this.config[index].startTime
                    this.startTimePopupShow = true
                }
                if (type == 'end') {
                    this.endTimeVal = this.config[index].endTime
                    this.endTimePopupShow = true
                }

            },
            timeConfirm(type) {
                if (type == 'start') {
                    this.config[this.timeIndex].startTime = this.startTimeVal
                    this.startTimePopupShow = false
                }
                if (type == 'end') {
                    this.config[this.timeIndex].endTime = this.endTimeVal
                    this.endTimePopupShow = false
                }

            },
            pushInfo() {
                if (this.business_license.length == 0) {
                    this.$Toast('请上传客户营业执照')
                    return
                }
                if (this.id_card.length == 0) {
                    this.$Toast('请上传法人身份证')
                    return
                }
                let goodsArr = [];
                let priceArr = [];
                let timeArr = [];
                let fileArr = [];
                this.config.map((item, index) => {
                    if (item.price == '') {
                        this.$Toast('请完善所有的产品价格')
                        return;
                    }
                    if (item.file == '') {
                        this.$Toast('请上传所有的合同文件')
                        return;
                    }
                    let time = `${this.timeTurn(item.startTime)} ~ ${this.timeTurn(item.endTime)}`
                    goodsArr.push(this.goodsSource[item.goodsIndex].id)
                    priceArr.push(item.price)
                    timeArr.push(time)
                    fileArr.push(item.file)
                });
                if (goodsArr.length != this.config.length) {
                    return
                }

                let data = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: 4,

                    business_license: this.business_license[0].url,
                    id_card: this.id_card[0].url,

                    goods_id: goodsArr,//选中商品
                    price: priceArr,//价格
                    over_time: timeArr,//合同时间
                    contract: fileArr, //合同
                }
                this.$post("/api/member_goods/save_product", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast('保存成功')
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                        } else {
                            this.$Toast(res.msg)
                        }
                    })
                    .catch(err => {
                    });

            }
        },
        created() {
            this.getQiniuToken();
            this.getProductConfig();
        },

    };
</script>

<style scoped lang="less">
    /**
        * @Description: 业务-保险-产品配置
        * @author Wangshu
        * @date 2020/1/4
        */
    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 32px;
    }

    .up-img {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 13px;
        padding-right: 15px;
        margin-bottom: 15px;

        > div:nth-of-type(1) {
            margin-left: 13px;
            margin-right: 22px;
        }

        .up-icon {
            width: 57vw;
            height: 125px;
        }
    }

    .product-config {
        width: 90vw;
        margin-left: 5vw;
        border: 1px solid #e6e6e6;
        padding: 15px 7px;
        box-sizing: border-box;
        border-radius: 2px;
        margin-bottom: 16px;

        .type-box {
            height: 29px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999999;
            position: relative;
            padding-right: 8px;
            font-size: 14px;

            img {
                width: 8px;
                height: 8px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 6px;
            }
        }
    }

    .line {
        display: flex;
        align-items: center;

        > div {
            flex: 1;
            margin: 5px 6px;
            border: 1px solid #dcdcdc;
            color: #333;
            border-radius: 2px;
        }

        > .money-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 10px;

            input {
                border: none;
                padding-left: 6px;
                height: 26px;
                width: 82px;
                padding-right: 30px;
                font-size: 15px;
                text-align: right;
            }
        }

        .upfile {
            margin-left: 5px;
            margin-top: 5px;
            font-size: 13px;
        }
    }

    .upfile {
        margin-left: 7px;
        margin-top: 5px;
        font-size: 13px;
    }

    .up-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        padding-bottom: 0;

        > div {
            border-radius: 5px;
            overflow: hidden;
        }

        // > div:nth-of-type(2) {
        //     width: 80px;
        //     height: 22px;
        //     background-image: linear-gradient(90deg, #f54a51 0%, #b62e34 100%);
        //     border-radius: 3px;
        //     text-align: center;
        //     color: #fff;
        //     font-size: 14px;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     padding: 2px;

        //     > div {
        //         width: 85px;
        //         height: 30px;
        //         background-image: linear-gradient(90deg, #f54a51 0%, #b62e34 100%);
        //         border-radius: 5px;
        //         text-align: center;
        //         color: #fff;
        //         font-size: 14px;
        //         display: flex;
        //         align-items: center;
        //         justify-content: center;
        //     }
        // }
    }
</style>
<!--<template>-->
<!--    <div class="bx-prodect-config">-->
<!--        <van-nav-bar-->
<!--                title="产品配置"-->
<!--                left-text="返回"-->
<!--                left-arrow-->
<!--                border-->
<!--                fixed-->
<!--                @click-left="$router.go(-1)"-->
<!--        />-->
<!--        <div style="height:50px"></div>-->
<!--        <div style="height: 20px;"></div>-->
<!--        <div class="up-img">-->
<!--            <div><span style="color: red;">*</span>客户营业执照上传</div>-->
<!--            <van-uploader v-model="business_license" multiple :max-count="1" :after-read="afterRead" :name="1">-->
<!--                <img class="up-icon" src="../../../assets/img/zhizhao.png" alt="">-->
<!--            </van-uploader>-->
<!--        </div>-->
<!--        <div class="up-img">-->
<!--            <div><span style="color: red;">*</span>法人身份证上传</div>-->
<!--            <van-uploader v-model="id_card" multiple :max-count="1" :after-read="afterRead" :name="2">-->
<!--                <img class="up-icon" src="../../../assets/img/id_card.png" alt="">-->
<!--            </van-uploader>-->
<!--        </div>-->
<!--        <div style="height: 9px;background: #f5f5f5;"></div>-->
<!--        <div class="title">-->
<!--            产品配置-->
<!--        </div>-->
<!--        <div class="product-config" v-for="(item, index) in config" :key="index">-->
<!--            <div class="line">-->
<!--                <div>-->
<!--                    <div class="type-box" @click="goodsPopupShow = true ;goodsPopupShowIndex = index">-->
<!--                        {{goodsSource.length==0?'&#45;&#45;请选择&#45;&#45;':goodsSource[item.goodsIndex].name}}-->
<!--                        <img src="../../../assets/icon/row.png" alt="">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="money-box">-->
<!--                    <input type="name" v-model="item.price">-->
<!--                    <span>元</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="line">-->
<!--                <van-field readonly clickable :value="$formatDateTime(item.startTime, 'yyyy-MM-dd')" @click="selectTime('start',index)" right-icon="clock-o" />-->
<!--                <van-field readonly clickable :value="$formatDateTime(item.endTime, 'yyyy-MM-dd')" @click="selectTime('end',index)" right-icon="clock-o" />-->
<!--            </div>-->
<!--            <div class="up-box">-->
<!--                <van-uploader :after-read="uploadSuccess" accept="*" :name="index">-->
<!--                    <van-button icon="upgrade" size="small" :color="item.file == '' ? '#7232dd':'#999'" type="primary">-->
<!--                        {{item.file == '' ? '未上传合同':'已上传合同'}}-->
<!--                    </van-button>-->
<!--                </van-uploader>-->
<!--                <van-button tag="div" size="small" color="linear-gradient(to right, #f54a51, #b62e34)" type="warning" @click="delConfig(index)">删除配置-->
<!--                </van-button>-->
<!--            </div>-->
<!--        </div>-->

<!--        <van-popup v-model="goodsPopupShow" position="bottom">-->
<!--            <van-picker show-toolbar value-key="name" :columns="goodsSource" @cancel="goodsPopupShow = false" @confirm="goodsSelectConfirm" />-->
<!--        </van-popup>-->

<!--        <van-popup v-model="startTimePopupShow" position="bottom">-->
<!--            <van-datetime-picker v-model="startTimeVal" type="date" @cancel="startTimePopupShow = false" @confirm="timeConfirm('start')" />-->
<!--        </van-popup>-->
<!--        <van-popup v-model="endTimePopupShow" position="bottom">-->
<!--            <van-datetime-picker v-model="endTimeVal" type="date" @cancel="endTimePopupShow = false" @confirm="timeConfirm('end')" />-->
<!--        </van-popup>-->
<!--        <div class="foot-btn">-->
<!--            <div class="blue-btn" @click="addConfig">新增产品配置</div>-->
<!--            <div class="red-btn" @click="pushInfo">保存配置</div>-->
<!--        </div>-->
<!--    </div>-->
<!--</template>-->

<!--<script>-->

<!--export default {-->
<!--    name: "rlProdectConfig",-->
<!--    data() {-->
<!--        return {-->
<!--            business_license: [], //营业执照-->
<!--            id_card: [], //法人身份证-->

<!--            config: [-->
<!--                {-->
<!--                    goodsIndex: 0,-->
<!--                    price: '',-->
<!--                    startTime: new Date(),-->
<!--                    endTime: new Date(),-->
<!--                    file: '',-->
<!--                }-->
<!--            ],-->

<!--            timeIndex: '',-->
<!--            startTimeVal: '',-->
<!--            startTimePopupShow: false,-->

<!--            endTimeVal: '',-->
<!--            endTimePopupShow: false,-->

<!--            minDate: new Date(2018, 0, 1),-->
<!--            maxDate: new Date(),-->
<!--            qiniuToken: {},-->
<!--            goodsPopupShow: false,-->
<!--            goodsPopupShowIndex: Number,-->
<!--            goodsSource: [],-->
<!--            imgUrl: '',-->

<!--        };-->
<!--    },-->
<!--    methods: {-->
<!--        afterRead(file, index) {-->
<!--            let { name } = index-->
<!--            this.$Toast.loading({-->
<!--                message: '上传中',-->
<!--                duration: 0,-->
<!--                forbidClick: true-->
<!--            });-->
<!--            this.$QiniuUpload(this.qiniuToken, file)-->
<!--                .then(res => {-->
<!--                    this.$Toast.clear();-->
<!--                    if (name == 1) {-->
<!--                        this.business_license = [-->
<!--                            { url: this.qiniuToken.domain + res.key },-->
<!--                        ]-->
<!--                    } else {-->
<!--                        this.id_card = [-->
<!--                            { url: this.qiniuToken.domain + res.key },-->
<!--                        ]-->
<!--                    }-->
<!--                })-->
<!--                .catch(err => {-->
<!--                    this.$Toast.clear();-->
<!--                });-->

<!--        },-->
<!--        // 文件上传-->
<!--        uploadSuccess(file, index) {-->
<!--            let { name } = index-->
<!--            this.$Toast.loading({-->
<!--                message: '上传中',-->
<!--                duration: 0,-->
<!--                forbidClick: true-->
<!--            });-->
<!--            this.$QiniuUpload(this.qiniuToken, file)-->
<!--                .then(res => {-->
<!--                    this.$Toast.clear();-->
<!--                    this.config[name].file = this.qiniuToken.domain + res.key-->
<!--                })-->
<!--                .catch(err => {-->
<!--                    this.$Toast.clear();-->
<!--                });-->

<!--        },-->
<!--        goodsSelectConfirm(value, index) {-->
<!--            let data = this.config[this.goodsPopupShowIndex];-->
<!--            data.goodsIndex = index;-->
<!--            this.$set(this.config, this.goodsPopupShowIndex, data);-->
<!--            this.goodsPopupShow = false;-->
<!--        },-->
<!--        addConfig(value) {-->
<!--            let data = {-->
<!--                goodsIndex: 0,-->
<!--                price: '',-->
<!--                startTime: new Date(),-->
<!--                endTime: new Date(),-->
<!--                file: '',-->
<!--            }-->
<!--            this.config.push(data)-->
<!--        },-->
<!--        delConfig(index) {-->
<!--            this.$Dialog.confirm({-->
<!--                title: '温馨提示',-->
<!--                message: '确认删除这个产品配置么',-->
<!--                closeOnPopstate: true,-->
<!--            })-->
<!--                .then(() => {-->
<!--                    this.config.splice(index, 1)-->
<!--                })-->
<!--                .catch(() => {-->
<!--                });-->
<!--        },-->
<!--        getQiniuToken() {-->
<!--            this.$post("/api/qiniu/up_token", {})-->
<!--                .then(res => {-->
<!--                    this.qiniuToken = res-->
<!--                })-->
<!--                .catch(err => {-->
<!--                });-->

<!--        },-->
<!--        getProductConfig() {-->
<!--            let data = {-->
<!--                wx_member_id: localStorage.getItem('wx_member_id'),-->
<!--                token: localStorage.getItem('token'),-->
<!--                cate_id: 4,-->
<!--            }-->
<!--            this.$post("/api/member_goods/get_product", data)-->
<!--                .then(res => {-->
<!--                    if (res.code == 1) {-->
<!--                        this.goodsSource = res.data.goods-->
<!--                    }-->
<!--                })-->
<!--                .catch(err => {-->
<!--                });-->

<!--        },-->
<!--        selectTime(type, index) {-->
<!--            this.timeIndex = index-->
<!--            if (type == 'start') {-->
<!--                this.startTimeVal = this.config[index].startTime-->
<!--                this.startTimePopupShow = true-->
<!--            }-->
<!--            if (type == 'end') {-->
<!--                this.endTimeVal = this.config[index].endTime-->
<!--                this.endTimePopupShow = true-->
<!--            }-->

<!--        },-->
<!--        timeConfirm(type) {-->
<!--            if (type == 'start') {-->
<!--                this.config[this.timeIndex].startTime = this.startTimeVal-->
<!--                this.startTimePopupShow = false-->
<!--            }-->
<!--            if (type == 'end') {-->
<!--                this.config[this.timeIndex].endTime = this.endTimeVal-->
<!--                this.endTimePopupShow = false-->
<!--            }-->

<!--        },-->
<!--        pushInfo() {-->
<!--            if (this.business_license.length == 0) {-->
<!--                this.$Toast('请上传客户营业执照')-->
<!--                return-->
<!--            }-->
<!--            if (this.id_card.length == 0) {-->
<!--                this.$Toast('请上传法人身份证')-->
<!--                return-->
<!--            }-->
<!--            let goodsArr = [];-->
<!--            let priceArr = [];-->
<!--            let timeArr = [];-->
<!--            let fileArr = [];-->
<!--            this.config.map((item, index) => {-->
<!--                if (item.price == '') {-->
<!--                    this.$Toast('请完善所有的产品价格')-->
<!--                    return;-->
<!--                }-->
<!--                if (item.file == '') {-->
<!--                    this.$Toast('请上传所有的合同文件')-->
<!--                    return;-->
<!--                }-->
<!--                let time = `${this.$formatDateTime(item.startTime, 'yyyy-MM-dd')} ~ ${this.$formatDateTime(item.endTime, 'yyyy-MM-dd')}`-->
<!--                goodsArr.push(this.goodsSource[item.goodsIndex].id)-->
<!--                priceArr.push(item.price)-->
<!--                timeArr.push(time)-->
<!--                fileArr.push(item.file)-->
<!--            });-->
<!--            if (goodsArr.length != this.config.length) {-->
<!--                return-->
<!--            }-->
<!--            let data = {-->
<!--                wx_member_id: localStorage.getItem('wx_member_id'),-->
<!--                token: localStorage.getItem('token'),-->
<!--                cate_id: 4,-->

<!--                business_license: this.business_license[0].url,-->
<!--                id_card: this.id_card[0].url,-->

<!--                goods_id: goodsArr,//选中商品-->
<!--                price: priceArr,//价格-->
<!--                over_time: timeArr,//合同时间-->
<!--                contract: fileArr, //合同-->
<!--            }-->
<!--            this.$post("/api/member_goods/save_product", data)-->
<!--                .then(res => {-->
<!--                    if (res.code == 1) {-->
<!--                        this.$Toast('保存成功')-->
<!--                        setTimeout(() => {-->
<!--                            this.$router.go(-1)-->
<!--                        }, 1500);-->
<!--                    } else {-->
<!--                        this.$Toast(res.msg)-->
<!--                    }-->
<!--                })-->
<!--                .catch(err => {-->
<!--                });-->

<!--        }-->
<!--    },-->
<!--    created() {-->
<!--        this.getQiniuToken();-->
<!--        this.getProductConfig();-->
<!--    },-->

<!--};-->
<!--</script>-->

<!--<style scoped lang="less">-->
<!--/**-->
<!--    * @Description: 业务-保险-产品配置-->
<!--    * @author Wangshu-->
<!--    * @date 2020/1/4-->
<!--    */-->
<!--.foot-btn {-->
<!--    padding-bottom: 80px;-->
<!--    display: flex;-->
<!--    justify-content: center;-->
<!--    align-items: center;-->
<!--    margin-top: 32px;-->
<!--}-->

<!--.up-img {-->
<!--    height: 120px;-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    justify-content: space-between;-->
<!--    color: #333;-->
<!--    font-size: 13px;-->
<!--    padding-right: 15px;-->
<!--    margin-bottom: 15px;-->

<!--    > div:nth-of-type(1) {-->
<!--        margin-left: 13px;-->
<!--        margin-right: 22px;-->
<!--    }-->

<!--    .up-icon {-->
<!--        width: 57vw;-->
<!--        height: 112px;-->
<!--    }-->
<!--}-->

<!--.product-config {-->
<!--    width: 90vw;-->
<!--    margin-left: 5vw;-->
<!--    border: 1px solid #e6e6e6;-->
<!--    padding: 15px 7px;-->
<!--    box-sizing: border-box;-->
<!--    border-radius: 2px;-->
<!--    margin-bottom: 16px;-->

<!--    .type-box {-->
<!--        height: 29px;-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--        justify-content: center;-->
<!--        color: #999999;-->
<!--        position: relative;-->
<!--        padding-right: 8px;-->
<!--        font-size: 14px;-->

<!--        img {-->
<!--            width: 8px;-->
<!--            height: 8px;-->
<!--            position: absolute;-->
<!--            right: 6px;-->
<!--        }-->
<!--    }-->
<!--}-->

<!--.line {-->
<!--    display: flex;-->
<!--    align-items: center;-->

<!--    > div {-->
<!--        flex: 1;-->
<!--        margin: 5px 6px;-->
<!--        border: 1px solid #dcdcdc;-->
<!--        color: #333;-->
<!--        border-radius: 2px;-->
<!--    }-->

<!--    > .money-box {-->
<!--        position: relative;-->

<!--        input {-->
<!--            border: none;-->
<!--            padding-left: 6px;-->
<!--            height: 25px;-->
<!--            width: 82px;-->
<!--            padding-right: 30px;-->
<!--            font-size: 15px;-->
<!--            text-align: right;-->
<!--        }-->
<!--    }-->

<!--    .upfile {-->
<!--        margin-left: 5px;-->
<!--        margin-top: 5px;-->
<!--        font-size: 13px;-->
<!--    }-->
<!--}-->

<!--.upfile {-->
<!--    margin-left: 7px;-->
<!--    margin-top: 5px;-->
<!--    font-size: 13px;-->
<!--}-->

<!--.up-box {-->
<!--    display: flex;-->
<!--    justify-content: space-between;-->
<!--    align-items: center;-->
<!--    padding: 5px;-->
<!--    padding-bottom: 0;-->

<!--    > div {-->
<!--        border-radius: 5px;-->
<!--        overflow: hidden;-->
<!--    }-->

<!--    // > div:nth-of-type(2) {-->
<!--    //     width: 80px;-->
<!--    //     height: 22px;-->
<!--    //     background-image: linear-gradient(90deg, #f54a51 0%, #b62e34 100%);-->
<!--    //     border-radius: 3px;-->
<!--    //     text-align: center;-->
<!--    //     color: #fff;-->
<!--    //     font-size: 14px;-->
<!--    //     display: flex;-->
<!--    //     align-items: center;-->
<!--    //     justify-content: center;-->
<!--    //     padding: 2px;-->

<!--    //     > div {-->
<!--    //         width: 85px;-->
<!--    //         height: 30px;-->
<!--    //         background-image: linear-gradient(90deg, #f54a51 0%, #b62e34 100%);-->
<!--    //         border-radius: 5px;-->
<!--    //         text-align: center;-->
<!--    //         color: #fff;-->
<!--    //         font-size: 14px;-->
<!--    //         display: flex;-->
<!--    //         align-items: center;-->
<!--    //         justify-content: center;-->
<!--    //     }-->
<!--    // }-->
<!--}-->
<!--</style>-->